<template>
	<view class="parking">
        <view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
        <view class="commonHeader">停车场</view>
        <view class="parkingMenu">
            <view class="parkingMenuTitle">停车区域：</view>
            <view class="parkingMenu" :class="{active:activeMenu ===0}"
            @tap="updateData(0)">停车场A</view>
            <view class="parkingMenu" :class="{active:activeMenu ===1}"
                  @tap="updateData(1)">停车场B</view>
        </view>
        <view class="chartTitle">
            车位数量
        </view>
        <view class="charts-box">
            <qiun-data-charts
                    type="pie"
                    :chartData="chartData"
                    background="none"
            />
        </view>
        <view class="chartTitle">
            车辆类型
        </view>
        <view class="charts-box">
            <qiun-data-charts
                    type="pie"
                    :chartData="chartData2"
                    background="none"
            />
        </view>
	</view>
</template>

<script>
    import { $http } from '../../static/common/js/http.js'
    // 获取系统状态栏的高度
    let systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
                statusBarHeight: systemInfo.statusBarHeight,
                activeMenu: 0,
                dataArr: [],
                chartData:{},
                chartData2:{}
			}
		},
		computed: {
		},
        onShow() {
            this.getData()
		},
		created() {

		},
		methods: {
		    getData(){
		        const vm = this
                $http('/fenghuoImp/indexAct/app/parking.html', 'post', {},
                    res => {
                        console.log(res,'9999')
                        vm.dataArr = res.data
                        vm.updateSetData()
                    },
                    err => {
                        console.log(err,'err')
                    }
                )
            },
            updateSetData(){
                const vm = this
                vm.chartData = {
                    "series": [
                        {
                            "data": [
                                {
                                    "name": "已用车位",
                                    color:'#BCDCFF',
                                    "value": vm.dataArr[vm.activeMenu].parking.used
                                },
                                {
                                    "name": "未用车位",
                                    color:'#0F81FF',
                                    "value": vm.dataArr[vm.activeMenu].parking.unused
                                }
                            ]
                        }
                    ]
                }
                let carType = vm.dataArr[vm.activeMenu].parking.carType
                console.log(carType, 'carType')
                vm.chartData2 = {
                    "series": [
                        {
                            "data": [
                                {
                                    "name": "小型车",
                                    color:'#0F81FF',
                                    "value": carType.filter(a=>a.type==="小型车").length>0?carType.filter(a=>a.type==="小型车")[0].count: 0
                                },
                                {
                                    "name": "中型车",
                                    color:'#63E7D9',
                                    "value": carType.filter(a=>a.type==="中型车").length>0?carType.filter(a=>a.type==="中型车")[0].count: 0
                                },
                                {
                                    "name": "大型车",
                                    color:'#BCDCFF',
                                    "value": carType.filter(a=>a.type==="大型车").length>0?carType.filter(a=>a.type==="大型车")[0].count:0
                                }
                            ]
                        }
                    ]
                }
            },
            updateData(e){
                this.activeMenu = e;
                this.updateSetData()
            }
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
    .parking{
        padding-bottom: 40rpx;
        background: url("../../static/images/bg26.png") no-repeat;
        /* 以父元素的百分比来设置背景图像的宽度和高度。*/
        background-size: 100% 100%;
        height: 100%;
        min-height: 100vh;
    }
    .chartTitle{
        font-size: 36rpx;
        font-weight: 500;
        color: #101010;
        margin: 70rpx 0;
        padding-left: 34rpx;
    }
    .charts-box{
        width: 100%;
        height:432rpx;
    }
    .parkingMenu{
        display: flex;
        align-items: center;
        padding-left: 34rpx;
        margin-top: 20rpx;
        .parkingMenuTitle{
            font-size: 32rpx;
            font-weight: 500;
            color: #101010;
            line-height: 60rpx;
        }
        .parkingMenu{
            font-size: 28rpx;
            font-weight: 400;
            color: #999999;
            line-height: 60rpx;
            margin-left: 34rpx;
            height: 60rpx;
            width: 190rpx;
            text-align: center;
            background: #FFFFFF;
            border-radius: 30rpx;
        }
        .active{
            border: 1px solid #0F81FF;
            font-weight: 400;
            color: #0F81FF;
            background-color: transparent;
        }
    }
</style>
